<!--
  元素项卡片组件
  使用 Element Plus Card 展示元素信息，支持悬停效果
-->
<template>
  <el-card
    class="element-card"
    :body-style="{ padding: '20px' }"
    :class="{ 'hover-effect': isHovered }"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
  >
    <template #header>
      <div class="card-header">
        <span>{{ element.title }}</span>
      </div>
    </template>
    <div class="element-description">
      <p>{{ element.description }}</p>
    </div>
    <div class="element-detail" v-if="element.detail">
      <p><strong>详细信息：</strong>{{ element.detail }}</p>
    </div>
  </el-card>
</template>

<script setup>
import { ElCard } from "element-plus";
import { ref } from "vue";

const props = defineProps({
  element: {
    type: Object,
    required: true
  }
});

const isHovered = ref(false);
</script>

<style scoped>
.element-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.element-card.hover-effect {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.element-description {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.element-detail {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin-top: 10px;
}

.element-detail strong {
  font-weight: bold;
  color: #333;
}
</style>